<template>
  <div>
    <el-container>
      <el-header>

        <div class="BackTitle">
          <BackTitle size="55px"></BackTitle>
        </div>

        <div class="exit" @click="toList">
          保存并退出
        </div>



      </el-header>
      <el-main>
<!--        <router-view></router-view>-->
        <div class="progress-bar-long">
          <div class="progress-bar-short"></div>
        </div>
        <div class="title">
          描述活动的具体内容
        </div>
        <div class="description">
          活动字数在50-50000字之间，图片大小不超过2mb，宽度不超过390px，格式限制为png/jpg。
        </div>
        <div class="richText">
          <quill-editor
              ref="myQuillEditor"
              v-model="$store.state.editedEvent.content"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"
          />
        </div>
      </el-main>
      <el-footer>

        <div class="button">
          <el-button @click="toDetail3">返回</el-button>
          <el-button @click="toList">发布</el-button>
        </div>


      </el-footer>
    </el-container>
  </div>
</template>

<script>
import BackTitle from "@/components/BackTitle";
import BackButton from "@/components/BackButton";
export default {
  components: {BackButton, BackTitle},
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            // ['blockquote', 'code-block'], // 引用  代码块
            // [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            // [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            // [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            // ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },
    }
  },
  methods: {
    toList() {
      let temp = this.$store.state.editedEvent
      this.$store.state.event_list.push(temp)
      this.$router.push({
        name:'List'
      })
    },
    toDetail3() {
      this.$router.push({
        name:'Detail3'
      })
    },

    // 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
// 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
// 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
// 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
  },
}
</script>

<style scoped>
.el-container{
  width: 100%;
  height: 100%;
  position: absolute;
}

.BackTitle{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  width: 30%;

  margin-left: -4%;
  margin-top: -1%;
}

.exit{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  float:right;

  margin-top: -1.3%;

  font-size: 20px;
}

/*.progress-bar{*/
/*  !*方便观察分区，画出分区边界*!*/
/*  border: 1px solid red;*/

/*  width: 100%;*/
/*  height: 1%;*/
/*  position: absolute;*/
/*  margin-left: -1.1%;*/
/*  margin-top: 0.7%;*/
/*}*/

.button{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  float: right;
  margin-right: 7%;
  margin-top: 0.5%;


}

.el-footer{
  border-top-style: solid;
  border-top-width:1px;
  border-top-color:#BBBBBB;
}
.el-button{
  background-color: #F65858;
  color: #fff;

  font-weight: 700;

  border-radius: 5px;;
  border:none;

  width:240px;
  height: 40px;
}

.progress-bar-long{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/

  background-color: #CECECE;

  width: 100%;
  height: 2%;
  position: absolute;
  margin-left: -1.02%;

}

.progress-bar-short{
  /*!*方便观察分区，画出分区边界*!*/
  /*border: 1px solid red;*/
  background-color: #008294;

  width: 20%;
  height: 100%;
  position: absolute;
}

.title{
  /*方便观察分区，画出分区边界*/
  border: 1px solid red;

  position: absolute;
  margin-top: 5%;
  margin-left: 35%;

  font-size: 50px;
  font-weight: 600;
}
.description{
  /*方便观察分区，画出分区边界*/
  border: 1px solid red;

  position: absolute;
  margin-top: 10%;
  margin-left: 40%;

  font-weight: 600;
}

.input{
  /*方便观察分区，画出分区边界*/
  border: 1px solid red;

  position: absolute;
  margin-top: 20%;
  margin-left: 35%;
}

.richText{
  /*方便观察分区，画出分区边界*/
  border: 1px solid red;

  width:40%;
  height: 30%;
  position: absolute;
  margin-top: 20%;
  margin-left: 30%;
}
</style>
